<template>
  <div
    class="mt-20px w-1102px h-108px bg-white rounded-16px p-18px box-border flex flex-row items-center hover:shadow-sm"
  >
    <div class="relative w-72px h-72px">
      <div class="ant-image" style="width: 72px; height: 72px">
        <img
          class="ant-image-img w-72px h-72px group-hover:scale-103 transition rounded-[50%] object-cover"
          :src="info.header_img"
          style="height: 72px"
        />
      </div>
    </div>
    <div class="ml-16px flex flex-col h-72px">
      <div class="mt-2px h-20px flex flex-row items-center">
        <h1 class="text-20px font-bold text-#333333 leading-20px">{{ info.nick_name }}</h1>
      </div>
      <div class="mt-8px h-16px flex flex-row items-center">
        <div
          class="h-16px bg-#70C6FF rounded-8px px-4px box-border flex flex-row items-center"
          v-show="info.age"
        >
          <img src="@/assets/men.png" alt="girl" class="w-12px h-12px" />
          <div class="ml-3px text-12px text-white">{{ info.age }}</div>
        </div>
        <div
          class="ml-6px h-16px bg-#16D6B5 rounded-8px px-6px box-border flex flex-row items-center"
        >
          <div class="w-4px h-4px rounded-[50%] bg-white"></div>
          <div class="ml-4px text-12px text-white">在线</div>
        </div>
      </div>
      <div class="mt-9px flex flex-row items-center">
        <img src="@/assets/id.png" alt="no" class="w-24px h-15px" />
        <div class="ml-4px text-14px text-#8A8C99">{{ info.user_id }}</div>
        <button id="copy" class="ml-4px">
          <img src="@/assets/copy.png" alt="copy" class="w-14px h-14px cursor-pointer" />
        </button>
      </div>
    </div>
    <div class="flex-1"></div>
    <AuthComponents @onClick="isShowSendGift = true" v-if="userInfo.user_id !== info.user_id">
      <button
        class="w-40px h-40px bg-white border border-#E6E6E6 rounded-12px flex justify-center items-center"
      >
        <img src="@/assets/gift.png" alt="" class="w-16px h-16px object-cover" /></button
    ></AuthComponents>
    <button
      class="ml-16px h-40px bg-white border border-#E6E6E6 rounded-12px flex flex-row items-center px-20px box-border"
    >
      <img src="@/assets/share.png" alt="" class="w-16px h-16px" />
      <div class="ml-4px text-14px text-#242633">分享</div>
    </button>
    <AuthComponents @onClick="isShowSendGift = true">
      <template v-if="userInfo.user_id !== info.user_id">
        <button
          class="h-40px px-20px rounded-12px bg-#1CB3FF flex flex-row items-center ml-16px text-white"
          v-if="!isFollow"
        >
          <img src="@/assets/follow.png" alt="" class="w-16px h-16px" />
          <div class="ml-4px text-16px" @click="handleFollow">关注</div>
        </button>
        <button
          class="h-40px px-20px rounded-12px bg-[#E4ECEF] flex flex-row items-center ml-16px text-#242633"
          v-else
        >
          <div class="ml-4px text-16px" @click="handleCancelFollow">已关注</div>
        </button>
      </template>
    </AuthComponents>
    <SendGift v-model:visible="isShowSendGift" />
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store'
import AuthComponents from '@/components/authComponents/index.vue'
import { followUser, cancelFollowUser } from '@/api/user'
import SendGift from './send-gift.vue'
import { Message } from '@arco-design/web-vue'
const { userInfo } = useUserStore()
const route = useRoute()
const user_id = route.params.id
const isShowSendGift = ref(false)
const props = defineProps(['info'])
const info = computed(() => {
  const nowYear = new Date().getFullYear()
  const age = props?.info?.birthday ? nowYear - new Date(props?.info?.birthday).getFullYear() : 0
  return {
    ...props.info,
    age
  }
})

const isFollow = ref(true)
watchEffect(() => {
  if (props.info) {
    isFollow.value = props.info.is_follow
  }
})
const handleFollow = () => {
  followUser(user_id)
    .then(() => {
      Message.success('关注成功')
      isFollow.value = true
    })
    .catch(() => {
      Message.error('关注失败')
    })
}
const handleCancelFollow = () => {
  cancelFollowUser(user_id)
    .then(() => {
      Message.success('取消关注成功')
      isFollow.value = false
    })
    .catch(() => {
      Message.error('取消关注失败')
    })
}
// handleFollow
</script>

<style></style>
